<template>
  <div>
<!--年份选择-->
    <el-row :gutter="19">
      <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="80px"
               label-position="left">
        <el-col :span="12">
          <el-form-item label="日期范围" prop="field101">
            <el-date-picker type="daterange" v-model="formData.field101" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期"
                            end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>


<!--绘图内容-->
    <div
      class="echart-box"
      id="paperYearMonth"
      :style="{width: '100%' , height: '500px',background:'#ffffff'}"
    ></div>
  </div>
</template>

<script>
import {yearCountById} from "@/api/echarts/echart";
/*let yearShowOne = false;*/

let that = this;
let year= '2018';
export default {
  name: "month",

  data() {
    return {
      // 定义图表，各种参数
      msg: "折线图",
      ydata: [],
      xdata: [],
      formData: {
        field101: '2023-03-01,2023-04-19',
      },
      rules: {
        field101: [{
          required: true,
          message: '日期范围不能为空',
          trigger: 'change'
        }],
      },
    };
  },
  //mounted是用来渲染图表的
  mounted: function () {
    this.drawLineByYear(); //按照默认值绘制图表
  },
  //created是用来获取图表数据的
  created() {
    this.getYearMonthCount();
  },
  watch: {
    ydata: {
      //对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
      handler: function () {
        this.drawLineByYear();
      },
      deep: true,
    },
  },
  methods: {
    //根据年份查询
    submitForm() {
      console.log(this.formData.field101)//2023-03-01,2023-04-19
      this.$refs['elForm'].validate(valid => {
        /*if (!valid) return
        // TODO 提交表单*/
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },

    //获取论文数量数据
    getYearMonthCount() {
      console.log("***************")
      yearCountById(JSON.parse("2018")).then(res => {
        console.log(",,,,,,,,,,,,,,,,")
        if (res.code === 200) {
          this.ydata.length = 0;
          for (let i = 0; i < res.data.length; i++) {
            this.ydata.push(res.data[i].count);
            this.xdata.push(res.data[i].paperMonth);
          }
        }

      })
    },
    //画图的方法
    drawLineByYear() {
      //获取容器的节点
      let mychart = this.$echarts.init(document.getElementById("paperYearMonth"));
      //构造图表数据---创建变量存入数据
      let options = {
        title: {
          text: this.formData.field101 + "时间内论文的发表数量",
          left: "center",
          tooltip: {},
        },
        xAxis: {
          data: this.xdata,
        },
        yAxis: {},
        series: [
          {
            data: this.ydata,
            type: 'line',
            //显示最大值和最小值
            markPoint: {
              data: [
                {
                  type: 'max',
                  name: '最大值'
                },
                {
                  type: 'min',
                  name: '最小值'
                }
              ]
            },
            //显示每个点的数字
            label: {
              show: true,	// 是否可见
              rotate: 0 	// 旋转角度
            }
          },
        ],
      };
      //根据创建的数据进行绘图
      mychart.setOption(options);
    },

  }

}

</script>

<style scoped>

</style>
